<template>
  <!-- 数据面板 -->
  <div>
    <q-list separator no-border>
      <q-expansion-item label="属性设置" default-opened>
        <table class="data-tb">
          <tr>
            <td>绑定值</td>
            <td>
              <q-input v-model="configObject.dataBind.text" />
            </td>
          </tr>
          <tr>
            <td>单位</td>
            <td>
              <q-input v-model="configObject.dataBind.unit" />
            </td>
          </tr>
          <tr>
            <td>動畫設置</td>
            <td>
              <q-select class="btn" v-model="model" :options="options"  :toggleOption="animate()" :updateInputValue="set()"/>
            </td>
          </tr>
          <tr>
            <td>數據源</td>
            <td>
              <q-input v-model="configObject.dataBind.source" />
            </td>
          </tr>
          <tr>
            <td>公差</td>
            <td>
              <q-input v-model="configObject.dataBind.public" />
            </td>
          </tr>
          <tr>
            <td>死區</td>
            <td>
            <q-input v-model="configObject.dataBind.die" />
            </td>
          </tr>
          <tr>
            <td>刷新率</td>
            <td>
             <q-input v-model="num"  type="number" suffix="s" @change="mycha()" />
            </td>
          </tr>
          <tr>
            <td>輸入最低</td>
            <td>
             <q-input v-model="configObject.dataBind.lowin" />
            </td>
          </tr>
          <tr>
            <td>輸入最高</td>
            <td>
              <q-input v-model="configObject.dataBind.heightin" />
            </td>
          </tr>
          <tr>
            <td>輸出最低</td>
            <td>
              <q-input v-model="configObject.dataBind.lowout" />
            </td>
          </tr>
          <tr>
            <td>輸出最高</td>
            <td>
             <q-input v-model="configObject.dataBind.heightout" />
            </td>
          </tr>
        </table>
      </q-expansion-item>
       
       <!-- <q-btn class="btn" color="secondary" text-color="black" label="加速" @click="add()"/>
    <q-btn color="primary" label="減速" @click="reduce()"/> -->
    </q-list>
  </div>
</template>

<script>
export default {
  props: {
    configObject: {
      type: Object,
      default: null
    }
  },
  data(){
    return {
      num:5,
      options: [
        '旋转', '颜色', '位移', '填充'
      ],
      model:''
    }
  },
  methods:{
    mycha(){
     console.log(this.num)
    },
    add(){
     
     if(this.num<=1){
       if(this.num<=0.1){
         this.$notifyFailed('不能再快了');
       }else{
           this.num-=0.1;
       this.configObject.style.animation='rotate'+' '+this.num+'s'+' '+'linear'+' '+' '+'infinite';
       }
    
      }else{
       this.num--;
     }
    },
    reduce(){
        this.num++;
       this.configObject.style.animation='rotate'+' '+this.num+'s'+' '+'linear'+' '+' '+'infinite';
    },
    set(a,b){

    },
   animate(val){
     if(this.model=="旋转"){
       this.configObject.style.animation='rotate'+' '+this.num+'s'+' '+'linear'+' '+' '+'infinite';
     }else if(this.model=="颜色"){
       console.log(this.configObject.style.animation)
       this.num = 0;
       this.configObject.style.animation='rotate'+' '+this.num+'s'+' '+'linear'+' '+' '+'infinite';
     }
   }
  }
}
</script>

<style lang="scss" scoped>
.data-tb {
  tr {
    td { 
      width: 50%;
    }
  }
 
}
.btn{
  // margin-top:20px;
  // margin-right: 40px;
}
</style>